<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<html>
<head>
<base href="${path}/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>个人博客后台管理</title>
<link rel="stylesheet" href="${path}/layui/css/layui.css">
</head>
<body>
	
<div class="layui-fluid">
	<div class="layui-form" style="margin-top: 10px">
		<input type="hidden" name="article_id" value="${article.article_id}">
  		<div class="layui-form-item">
    		<label class="layui-form-label">文章标题</label>
    		<div class="layui-input-block">
      			<input type="text" name="article_title" value="${article.article_title}" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">发布时间</label>
    		<div class="layui-input-block">
      			<input type="text" name="article_date" id="ctime" value="${article.article_date}" lay-verify="required" autocomplete="off" class="layui-input">
    		</div>
  		</div>    		
  		<div class="layui-form-item layui-form-text">
    		<label class="layui-form-label">文章标签类型</label>
    	<input type="hidden" name=lable_id value="${article.sal.lable_id}">
    		
    		<div class="layui-input-block">
      			<select name="lable" lay-verify="required">
      
      			</select>
    		</div>
  		</div>  
  		<div class="layui-form-item">
    		<div class="layui-input-block">
      			<button type="button" class="layui-btn" id="imgbtn">
  					<i class="layui-icon">&#xe67c;</i> 上传标题图片  					
				</button>
				<span id="imgpath" style="margin-left:20px;">
					<input type="hidden" name="imgpic" value="">
					
					
				</span>
			
				
    		</div>
  		</div>    			
  		<div class="layui-form-item layui-form-text">
    		<label class="layui-form-label">文章内容</label>
    		<div class="layui-input-block">
      			<textarea name="article_content" id="content" style="display:none;" class="layui-textarea">${article.article_content}</textarea>
    		</div>
  		</div>
  		<div class="layui-collapse" lay-accordion>
  			<div class="layui-colla-item">
   				 <h2 class="layui-colla-title">文章摘要</h2>
   				 <div class="layui-colla-content layui-show">
   					 <div class="layui-form-item layui-form-text">
    				<label class="layui-form-label">文章摘要</label>
    				<div class="layui-input-block">
      				<textarea name="article_remark_content"  class="layui-textarea">${article.article_remark_content}</textarea>
    				</div>
  					</div>
   				 </div>
 		 	</div>
  		</div>
  		<div class="layui-form-item layui-hide">
	      	<input type="button" lay-submit lay-filter="lay-form-submit" id="lay-form-submit">
	    </div>
  	</div>
  
  	<script src="${path}/layui/layui.js"></script>

<script>
	layui.use(['form', 'laydate', 'upload', 'layedit','element'], function(){
		var form = layui.form;
		var $ = layui.$;
		var upload = layui.upload;
		var layedit = layui.layedit;
		  var element = layui.element;
		  /*标签列表*/
		  $.ajax({
		 		url: '${path}/action/lable/list',
		 		type:'post',
		 		dataType: 'json',
		 		success: function(data) {
		 			var lis=[];
		 			$.each(data, function(index,item){
		 				var li='';
		 				if(item.lable_id==$('input[name="lable_id"]').val())
		 					li+='<option value="'+item.lable_id+'" selected>'+item.lable_name+'</option>'
		 					else
		 					li+='<option value="'+item.lable_id+'">'+item.lable_name+'</option>';
		 				lis.push(li);
		 				
		 				});
		 			$('[name="lable"]').append(lis.join(''));
		 			form.render("select");        
		 		}      			
		 	});	
		
		//时间
		layui.laydate.render({elem: '#ctime', value: new Date()});
		//文件上传
		upload.render({
			elem: '#imgbtn',
			url: '${path}/upload',
			acceptMime:'image/*',
			data:{
				imgType:'articles',
				imgId:'${article.article_id}'
			},
			multiple: true,
			done: function(resp) {
				if(resp.success) {
					var li='';
					$('#titlePic').val(resp.data.src);
					li+='<input type="hidden" name="imgsrc" value="'+resp.data.src+'">'
					li+='<input type="hidden" name="imgid" value="'+resp.data.img_id+'">';
					li+='<a target="_blank" href="${path}'+resp.data.src+'">'+resp.data.title+'</a>';
					$('#imgpath').append(li);
				}
				layer.msg(resp.msg);
			}			
		});
		//富文本框
		layedit.set({
  			uploadImage: {
  				url: '${path}/upload?imgType=articles'
  	
  				}
		});
		var editIdx = layedit.build('content');
		//监听提交
    	form.on('submit(lay-form-submit)', function(data) {
    		// 将富文本框中的内容，赋值给content文本域
    		//
    		
    		data.field.article_content = layedit.getContent(editIdx);
    		if(data.field.article_remark_content=="")
    		{
    			//alert("摘要为空");
    			layer.msg('摘要为空，自动将正文部分补充到摘要'); 
    			data.field.article_remark_content=layedit.getText(editIdx);
    		}
      		var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 
      		//alert(data.field.article_content);
      		var pic=$('[textarea="content"]').contents().find("body").find('img');
      		var lis=[];
      		
      		$.each(pic,function(){
 				var item=$(this).attr('alt').replace(/(.*\/)*([^.]+).*/ig,"$2");
 				//alert(item);
				lis.push(item);

 			});
			data.field.imgpic=lis.join(',');
      		console.log(pic);
      		//提交ajax成功后，关闭当前弹层并重载表格
      		$.post('${path}/action/article/save', data.field, function(json) {
      				parent.layui.table.reload('lay-table'); //重载表格
      	      		parent.layer.close(index); //再执行关闭      				
      			}, 'JSON');
    	});
		
	});	
	
	</script>
</div>

</body>
</html>
